<!--  -->
<template>
  <el-card>
    <template #header>
      电影查询
    </template>
    <el-form
      ref="formRef"
      :inline="true"
      :model="formInline"
    >
      <el-form-item
        prop="name"
        label="电影名称"
      >
        <el-input v-model="formInline.name" />
      </el-form-item>
      <el-form-item
        prop="type"
        label="电影类型"
      >
        <el-select
          v-model="formInline.type"
          clearable
          placeholder=" "
        >
          <el-option
            v-for="(value, key) in typeEnum"
            :key="key"
            :label="key"
            :value="value"
          />
        </el-select>
      </el-form-item>
      <el-form-item
        prop="country"
        label="所属国家"
      >
        <el-select
          v-model="formInline.country"
          clearable
          placeholder=" "
        >
          <el-option
            v-for="(value, key) in countryEnum"
            :key="key"
            :label="key"
            :value="value"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          @click="onSubmit"
        >查询</el-button>
        <el-button
          type="primary"
          @click="resetForm(formRef)"
        >重置</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue';
import type { FormInstance } from 'element-plus';
import { typeEnum, countryEnum } from '../enum';

const emit = defineEmits(['getFilmsList']);
const formRef = ref<FormInstance>();

const formInline = reactive({
  name: null,
  type: null,
  country: null
});

const onSubmit = () => {

  emit('getFilmsList', formInline);
};

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
  emit('getFilmsList');
};
</script>

<style lang="scss" scoped></style>
